<template>
	<view class="flex flex-col h-screen">
		<NavBarVue title="入驻指南"></NavBarVue>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y class="h-full">
				<view class="">
					<view class="w-full h-[300rpx]">
						<ImageBoxVue src="/static/user/settledProcess.png"></ImageBoxVue>
					</view>
					<view class="bg-white rounded-t-3xl">
						<view class="flex justify-center py-30">
							<text>入驻流程</text>
						</view>
						<view class="relative">
							<view class="absolute border-dashed border-r border-[#1296db]"
								:style="{height:`${(process*108)+40}rpx`,left:`50rpx`,top:`70rpx`}"> </view>
							<view class="flex p-30" v-for="e,i in processList" :key="i">
								<view class="relative bg-white w-[40rpx] h-[40rpx]">
									<ImageBoxVue src="/static/icons/check.png" v-if="process>i">
									</ImageBoxVue>
									<view
										:class="[process==i?'bg-[#1296db] text-white':'text-black border-solid border-black', 'rounded-full w-[40rpx] h-[40rpx] flex justify-center items-center']"
										v-else>
										{{i}}
									</view>
								</view>
								<view class="flex-1 flex justify-between items-center">
									<view class="flex flex-col ml-20">
										<text class="text-sm font-bold">{{e.title}}</text>
										<text class="mt-20">{{e.label}}</text>
									</view>
									<view class="py-10 px-20 rounded-lg bg-[#1296db]" v-if="process==i"
										@click="onProgress(i)">
										<text class="text-white">去完成</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app"
	import userApi from '@/apis/apiList/userApi';
	const process = ref(0) //0第一步 1第二步 2第三步
	const anchorId = ref("") //主播Id
	const processList = [{
		title: "授权协议",
		label: "完成授权 方便快捷"
	}, {
		title: "资料完善与实名认证",
		label: "完整信息资料 平台保证信息安全"
	}, {
		title: "技能考试",
		label: "学习平台规则 服务更顺利"
	}]
	// 查询主播信息
	const ifAnchor = (router) => {
		userApi.queryAnchorInfoByMemberId({
			"member.id": uni.getStorageSync('user').id
		}).then((res) => {
			console.log(res);
			anchorId.value = res.data.id
			// 查询到主播资料
			process.value = 2
		}).catch(err => {
			// 401未查询到主播资料
			process.value = 1
		})
	}
	const onProgress = (key) => {
		if (key == 0) {
			// 授权协议
		}
		if (key == 1) {
			// 资料完善
			uni.navigateTo({
				url: "/pages/user/settled"
			})
		}
		if (key == 2) {
			// 技能考试
			uni.navigateTo({
				url: `/pages/user/examList?id=${anchorId.value}`
			})
		}
	}
	onShow(() => {
		ifAnchor()
	})
</script>

<style>

</style>